<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="static/h-ui/css/H-ui.reset.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.min.css"/>
    <!--[if lt IE 9]>
    <link href="static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>Weibo-Admin-Login</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style>
        body {
            background-image: url(temp/bg.jpg);
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: left top;
        }

        nav.breadcrumb {
            background-color: #ffffff;
        }

        div#login-box {
            position: relative;
            width: 500px;
            height: 250px;
            margin: 0 auto;
            top: 230px;
        }

        @media (max-width: 747px) {
            div#login-box{
                height: 320px;
            }
        }
    </style>
</head>
<body>
<header class="navbar-wrapper">
    <div class="navbar navbar-black navbar-fixed-top">
        <div class="container cl"><a class="logo navbar-logo hidden-xs" href="#">Weibo  后台管理</a> <a
                class="logo navbar-logo-m visible-xs" href="#">Weibo</a> <span
                class="logo navbar-slogan hidden-xs"></span> <a aria-hidden="false"
                                                                class="nav-toggle Hui-iconfont visible-xs"
                                                                href="javascript:void(0);"></a>
            <nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
            </nav>
            <nav class="navbar-userbar hidden-xs"></nav>
        </div>
    </div>
</header>
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont"></i> <a href="#" class="c-primary">登录</a></div>
</nav>

<div class="panel panel-default" id="login-box">
    <div class="panel-header">管理员登录</div>
    <div class="panel-body">
        <form action="/admin_login" method="post" class="form form-horizontal responsive" id="loginform" novalidate="novalidate">
            <div class="row cl">
                <label class="form-label col-xs-3">用户名：</label>
                <div class="formControls col-xs-8">
                    <input type="text" class="input-text" placeholder="管理员用户账号" name="admin_phone"
                           id="username" aria-required="true" aria-invalid="true"><label id="username-error"
                                                                                         class="error" for="username"
                                                                                         style="display: none;">必填信息</label>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3">密码：</label>
                <div class="formControls col-xs-8">
                    <input type="password" class="input-text" autocomplete="off" placeholder="密码" name="admin_password"
                           id="password" aria-required="true"><label id="password-error" class="error" for="password"
                                                                     style="display: none">必填信息</label>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-xs-offset-3">
                    <input class="btn btn-primary" type="submit" value="&nbsp;&nbsp;登录&nbsp;&nbsp;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"></label>
                <div class="col-xs-8" id="response-info">
                    <!--<span class="Huialert Huialert-error hui-bouncein"><i class="Hui-iconfont"></i>用户名与密码不匹配</span>-->
                    <!--<span class="Huialert Huialert-success hui-bouncein"><i class="Hui-iconfont"></i>登录成功</span>-->
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>
    function responseErrorInfo(message) {
        var s = '<span class="Huialert Huialert-error hui-bouncein"><i class="Hui-iconfont"></i>'+message+'</span>';
        $('#response-info').html(s);
    }

    function responseSuccessInfo(message) {
        var s = '<span class="Huialert Huialert-success hui-bouncein"><i class="Hui-iconfont"></i>'+message+'</span>';
        $('#response-info').html(s);
    }

    function loginRequest(form) {
        var $data = new FormData(form);
        $.ajax({
            url : '/admin_login',
            type : 'POST',
            dataType : 'json',
            data : $data,
            processData: false,
            contentType: false,
            xhrFields: {
                withCredentials: true
            },
            success : function (data) {
                if(data.status == 200){
                    responseSuccessInfo(data.message);
                    setTimeout(function () {
                        window.location.href = 'home.html';
                    },1000);
                }
                else{
                    responseErrorInfo(data.message);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        })
    }

    $(function () {
        $("#loginform").validate({
		    rules:{
			    admin_phone:{
				    required:true
			    },
			    admin_password:{
				    required:true,
				    minlength:4,
				    maxlength:16
			    }
		    },
		    onkeyup:false,
		    focusCleanup:true,
		    success:"valid",
		    submitHandler:function(form){
			    loginRequest(form);
		    }
	    });
    });
</script>
</body>
</html>